<template lang="pug">
  div(style="width:100%;height:calc(100% - 10px)")
   myTable(ref="myTable" :mySeach="[]" :tableHeader="tableHeader" :myTableButtons="myTableButtons"  :myButtons="myButtons" seachMenth="POST" seachUrl="/childActivity/page")
   el-drawer(:title="isAdd?'新增活动通知':'编辑活动通知'" :visible.sync="dialogVisible" append-to-body :wrapperClosable="false")
     el-form.myAddFrom(:model="formInline" :rules="myRules" ref="addOrEdit" label-position="top")
       el-form-item(:label="item.label" v-for="(item,index) in myAdd" :key="index" :prop="item.prop")
        el-col(:span="24")
          el-date-picker(v-model="formInline[item.prop]" type="datetime" v-if="item.type==='datetime'" :disabled="!formInline.daterange||formInline.daterange.length == 0"
            :placeholder="item.placeholder" :picker-options ="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm" style="width:100%")
          el-date-picker(v-model="formInline[item.prop]" type="datetimerange" v-if="item.type==='datetimerange'" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
            align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" @change="datetimerangeChange")
          el-select( v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='select'" filterable style="width:100%"
            :multiple="typeof item.multiple==='undefined'?false:item.multiple")
           el-option(v-for="(itemData,itemIndex) in item.data" :key="itemIndex" :label="itemData.name" :value="itemData.id" )
          el-input(v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='input'" style="width:100%")
          el-input(v-model="formInline[item.prop]" clearable :placeholder="item.placeholder" type="textarea" v-if="item.type==='textarea'" style="width:100%"  :rows="4")
       el-form-item.bottom
         el-col(:span="21")
          el-button(type="primary" @click="onSubmit") {{isAdd?'保存':'修改'}}
</template>
<script>
import myTable from '../components/myTable.vue'
import { getClassesByArea } from '@/api/common'
import { mapGetters } from 'vuex'
import { childActivityAddOrUpdate, childActivityDelete } from '@/api/educationalAdminstration'
import Vue from 'vue'

export default {
  name: 'LeaveManagement',
  components: {
    myTable
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  data () {
    return {
      isAdd: true,
      dialogVisible: false,
      tableHeader: [
        {
          label: '活动标题',
          prop: 'title'
        },
        {
          label: '面向班级',
          prop: 'classNames'
        },
        {
          label: '活动类型',
          prop: 'type'
        },
        {
          label: '活动地点',
          prop: 'address'
        },
        {
          label: '活动开始时间',
          prop: 'startTime'
        },
        {
          label: '活动结束时间',
          prop: 'endTime'
        },
        {
          label: '已报名人数',
          prop: 'activeSize'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        }
      ],
      formInline: {},
      myRules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        classIds: [
          { required: true, message: '请选择所在班级', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请选输入活动地点', trigger: 'blur' }
        ],
        daterange: [
          { required: true, message: '请选择请活动时间', trigger: 'change' }
        ],
        deadlineTime: [
          { required: true, message: '请选择报名截止时间', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入活动内容', trigger: 'blur' }
        ]
      },
      myAdd: [
        {
          label: '活动标题',
          type: 'input',
          placeholder: '请输入活动标题',
          prop: 'title'
        },
        {
          label: '面向班级',
          type: 'select',
          prop: 'classIds',
          multiple: true,
          data: []
        },
        {
          label: '活动类型',
          type: 'select',
          prop: 'type',
          data: []
        },
        {
          label: '活动地点',
          type: 'input',
          placeholder: '请输入活动地点',
          prop: 'address'
        },
        {
          label: '活动时间',
          type: 'datetimerange',
          placeholder: '选择日期',
          prop: 'daterange'
        },
        {
          label: '截至报名时间',
          type: 'datetime',
          placeholder: '选择日期',
          prop: 'deadlineTime'
        },
        {
          label: '活动内容',
          type: 'textarea',
          placeholder: '选输入活动内容',
          prop: 'content'
        },
        {
          label: '备注',
          type: 'textarea',
          placeholder: '选输入备注',
          prop: 'remark'
        }
      ],
      pickerOptions: {
        // 禁用过去的日期
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return false
        }
      },
      myTableButtons: [
        {
          label: '详情',
          click: (data) => {
            console.log('data', data)
          }
        },
        {
          label: '编辑',
          click: (data) => {
            console.log('data', data)
          }
        },
        {
          label: '删除',
          click: (data) => {
            console.log('data', data)
          }
        }
      ],
      myButtons: [
        {
          label: '添加活动',
          type: 'warning',
          click: (data) => {
            console.log('data', data)
          }
        }
      ]
    }
  },
  async mounted () {
    console.log('数据', this.formInline)
    this.pickerOptionsEnd.disabledDate = (time) => {
      return this.formInline.daterange && this.formInline.daterange.length >= 1 ? (time > new Date(this.formInline.daterange[0]).getTime() || time.getTime() < Date.now() - 8.64e7) : time.getTime() < Date.now() - 8.64e7
    }
    // 班级
    this.myAdd[1].data = await (getClassesByArea({ areaId: this.curArea.areaId }) || [])
    this.myAdd[2].data = [
      {
        name: '亲子活动',
        id: '亲子活动'
      },
      {
        name: '节日活动',
        id: '节日活动'
      },
      {
        name: '户外活动',
        id: '户外活动'
      },
      {
        name: '日常活动',
        id: '日常活动'
      }
    ]
    this.myTableButtons[0].click = (data) => {
      console.log('详情', data)
      this.$router.push(`/educationalAdministration/eventNotification/info/${data.row.id}`)
    }
    this.myTableButtons[1].click = (data) => {
      this.isAdd = false
      this.$refs.addOrEdit?.resetFields()
      this.formInline = data.row
      this.formInline.classIds = typeof data.row.classIds === 'string' ? data.row.classIds.split(',') : data.row.classIds
      Vue.set(this.formInline, 'daterange', [data.row.startTime, data.row.endTime])

      console.log('编辑', this.formInline)
      this.dialogVisible = true
    }
    this.myTableButtons[2].click = (data) => {
      console.log('删除', data)
      childActivityDelete({ id: data.row.id }).then(res => {
        console.log('res', res)
        this.$message({
          type: 'success',
          message: `删除成功!`
        })
        this.$refs.myTable.onSubmit()
      })
    }
    this.myButtons[0].click = (data) => {
      console.log('新增请假登记', data)
      this.isAdd = true
      this.formInline = {}
      this.$refs.addOrEdit?.resetFields()
      this.dialogVisible = true
    }
  },
  methods: {
    datetimerangeChange (val) {
      console.log('改变', val)
    },
    onSubmit () {
      this.$refs.addOrEdit.validate((valid) => {
        if (valid) {
          this.formInline.startTime = this.formInline.daterange[0]
          console.log('this.formInline.daterange', this.formInline)
          if (Date.now() >= new Date(this.formInline.startTime).getTime()) {
            this.$message.warning('活动开始时间不能小于当前时间')
            return false
          }
          if (new Date(this.formInline.startTime).getTime() < new Date(this.formInline.deadlineTime).getTime()) {
            this.$message.warning('截止报名时间不能大于活动开始时间')
            return false
          }
          if (new Date(this.formInline.deadlineTime).getTime() <= Date.now()) {
            this.$message.warning('截止报名时间不能小于当前时间')
            return false
          }
          this.formInline.endTime = this.formInline.daterange[1]
          delete this.formInline.daterange
          this.formInline.classIds = this.formInline.classIds.join(',')
          console.log('新增', this.formInline)
          childActivityAddOrUpdate(this.formInline).then(res => {
            console.log('新增res', res)
            this.$message({
              type: 'success',
              message: `${this.isAdd ? '新增' : '修改'}成功!`
            })
            this.$refs.myTable.onSubmit()
            this.isAdd = false
            this.dialogVisible = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

::v-deep .el-drawer__header{
  color: rgba(0,0,0,0.9);
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  font-style: normal;
  text-transform: none;
  padding: 16px 20px 0 20px;
  margin: 0 0 16px 0;
}
::v-deep .el-drawer__body{
  height: 100%;
}
.myAddFrom{
  padding: 0 20px;
  height: calc(100% - 60px);
  overflow-y:auto;
  ::v-deep .el-date-editor{
    width: 100%;
  }
  ::v-deep .el-form-item__label{
   padding: 0; font-weight: bold;
  }
  //::v-deep .el-form-item__error{
  //  margin-left: 120px;
  //}
  .bottom{
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
}
</style>
